<!DOCTYPE html>
<html>
<head>
    <title>ItemList</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <!-- 所有的 css & js 资源 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../../static/sa.css">
    <script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script>
    <script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
    <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
    <script src="https://www.layuicdn.com/layer-v3.1.1/layer.js"></script>
    <script src="../../static/sa.js"></script>
    <script src="../axios.min.js"></script>
    <style type="text/css">
        /* .data-table .el-table__body-wrapper{min-height: 0px; max-height: 0px;}
        .data-table .el-table__body-wrapper{transition: all 0.3s;} */
    </style>
</head>
<body>
<div class="vue-box" style="display: none;" :style="'display: block;'">
    <div class=c-panel">
        <el-table class="data-table" ref="data-table" :data="dataList" size="small">
            <el-table-column label="itemId" prop="itemId" > </el-table-column>
            <el-table-column label="name" prop="name"></el-table-column>
            <el-table-column label="price" prop="price" ></el-table-column>
            <el-table-column label="storeId" prop="storeId"></el-table-column>
            <el-table-column label="amount" prop="amount"></el-table-column>
        </el-table>
    </div>
</div>
<script>
    var mockData = {
        code: 200,
        msg: 'ok',
        data:[
            {
                "itemId": 18484479,
                "name": "写院件适思",
                "price": 39145.47,
                "description": "干情市解较果厂社接反料第复常。受用国准安温广列题身那律满。元压江只具研实受传五报日电里状水众。转日通矿原指众难青这问县。术与命取二当证照商表所斯子石后第在。",
                "imageDir": "http://dummyimage.com/200x100/4A7BF7&text=Hello",
                "storeId": 913437281,
                "amount": 26
            },
            {
                "itemId": 5265611,
                "name": "关住严",
                "price": 63112.39,
                "description": "加走按就切更济积今族议选于力比现等第。才金联空况容出则具并作断住么外。周进利场深层你百温它矿常规办代。海理子查选切证实治构生金解没教。",
                "imageDir": "http://dummyimage.com/200x100/4A7BF7&text=Hello",
                "storeId": 962701434,
                "amount": 54
            },
            {
                "itemId": 53327318,
                "name": "走见车温值家",
                "price": 2257.17,
                "description": "合水装此活片流物式真上实月地影速眼。而容当设命快事委全会报华张从种大动。全织入以机程太身所本般素美子。实小些后花整日别院样引克劳果。指养育月理物写高存量义自风统争织。与强查每除便线拉许京教持特受。",
                "imageDir": "http://dummyimage.com/200x100/4A7BF7&text=Hello",
                "storeId": 946274439,
                "amount": 19
            },
            {
                "itemId": 51497464,
                "name": "条石者京",
                "price": 56966.74,
                "description": "广三极光级也与准会革场中流风个。里位但政列向压量应习运有算路安叫元月。种热万图从始运意业制导件。须亲并高前商见引引劳存特带然酸走按。",
                "imageDir": "http://dummyimage.com/200x100/4A7BF7&text=Hello",
                "storeId": 937712387,
                "amount": 45
            },
            {
                "itemId": 74031763,
                "name": "万称图北",
                "price": 29359.76,
                "description": "想斯历中天什气般形到了各立科们型。区划己音难证回不中和近被花状合称铁身。治度定记期争矿回没影素可何口本情。即教名美格价理须片权己究走程易。",
                "imageDir": "http://dummyimage.com/200x100/4A7BF7&text=Hello",
                "storeId": 911884251,
                "amount": 66
            }
        ]
    }
    var app = new Vue({
        el: '.vue-box',
        data: {
            sa: sa,
            p: { // 查询参数
                id: '',
                title: '',
                sortType: 0,
                pageNo: 1,
                pageSize: 10,
            },
            dataCount: 0,	// 数据总数
            dataList: [] // 数据集合
        },
        methods: {
            // 数据刷新
            f5: function() {
                // TODO: 获取数据
                const url = "http://localhost:8080/api/v1/items";
                axios.get(url).then(function(response) {
                    // console.log(response);
                    this.dataList = response.data;
                    // console.log(this.dataList);
                    sa.f5TableHeight();		// 刷新表格高度
                }.bind(this))
            }
        },
        created: function() {
            this.f5();
            sa.onInputEnter();		// 监听输入框的回车事件，执行查询
        }
    })
</script>
</body>
</html>
